
<!DOCTYPE html>

<html class="no-js no-scroll" lang="">
    
    <head>
        
        <title>Detail</title>
        
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="../css/main.css"/>
        
    </head>
    
    <body>
		
        <UICollectionView id="list" name="list" class="list" columns="1" is-vertical>
            
            <MovieCell name="movie" class="movie-cell" is-static is-row>
				
				<div class="movie-header">
					<img class="movie-cover" name="cover"/>
					<div class="movie-info">
						<div class="item">
							<label class="text-bold" name="title">Movie Title</label>
							<label class="movie-year" name="year">2015</label>
							<label class="movie-det" name="det">none</label>
						</div>
						<div class="item">
							<label class="text-bold">Critics</label>
							<label class="text-large" name="critics" id="critics-label">0</label>
						</div>
						<div class="item">
							<label class="text-bold">Audience</label>
							<label class="text-large" name="audience" id="audience-label">0</label>
						</div>
					</div>
				</div>
				<div class="line"></div>
				<label class="text-small movie-synopsis" name="synopsis">No synopsis.</label>
				<div class="line"></div>
				<label class="actor-title text-bold">Actors</label>
				
            </MovieCell>
			
            <UICollectionViewCell name="actors" class="actor" is-row>
                <label class="actor-indictor">🎩</label><label name="actor-name" class="actor-name">Actor name</label>
            </UICollectionViewCell>

        </UICollectionView>
        
        <style>
			
			body {
				width: 100%;
				height: 100%;
				background-color: white;
			}
		
            .list {
                display: block;
                width: 100%;
                height: 100%;
                z-index: 1;
				background-color: white;
            }
		
			.line {
				display: block;
				width: 100%;
				height: 1px;
				background-color: #ddd;
			}

            .movie-header {
                width: 100%;
                height: 180px;
                position: relative;
            }
            
            .movie-cell {
                width: 100%;
                height: auto;
            }
            
            /************
             * Movie
             **/
            
            .movie-cover {
                position: absolute;
                width: 108px;
                height: 160px;
                content-mode: fill;
                background-color: #eee;
                margin-left: 10px;
                margin-top: 10px
            }
            
            .movie-info {
                height: 120px;
                margin-left: 128px;
                margin-top: 10px;
            }
            
            .movie-info .item {
                width: 100%;
                height: 60px;
            }
        
            .movie-det,
            .movie-year {
                font-size: 12px;
                height: 14px;
                width: 100%;
            }
            .movie-det {
                width: auto;
                padding-left: 5px;
                padding-right: 5px;
                border: 1px solid black;
                text-align: center;
            }
            
            .movie-synopsis {
                width: 90%;
                margin: 0 5%;
                height: auto;
            }
            
            /************
             * Actor
             **/
        
            .actor-title {
                margin-left: 10px;
            }
            
            .actor-cell {
                width: 100%;
                height: 20px;
            }
            
            .actor {
                width: 300;
                height: 20px;
                margin-left: 10px;
                margin-right: 10px;
            }
            
            .actor-name,
            .actor-indictor {
                font-size: 14px;
                color: black;
                display: inline-block;
            }
            
            @media (device-width: 414px) {
                .actor,
                .movie-synopsis {
                    width: 384px;
                }
            }
            
            @media (device-width: 375px) {
                .actor,
                .movie-synopsis {
                    width: 384px;
                }
            }
            
            /************
             * Text
             **/
            
            .text-bold {
                width: 100%;
                height: 20px;
                font-size: 16px;
            }
            
            .text-large {
                width: auto;
                height: 20px;
                font-size: 24px;
                font-weight: bold;
            }
            
            .text-small {
                font-size: 14px;
            }

        </style>
        
    </body>
    
</html>
